<template>
	<view class="box">
		<navtop :back='true' title="设置"></navtop>
		<loading v-if="user.id==undefined" :load="true"></loading>
		<block v-else>
			<view class="list">
				<view class="li" @click="get_uppic()">
					<view class="name">修改头像</view>
					<view class="imgbox">
						<view class="img">
							<image :src="user.pic" mode="aspectFill"></image>
						</view>
						<uni-icons class="icon" type="forward" size="14" color="#999"></uni-icons>
					</view>
				</view>
				<view class="li" @click="get_edit('nickname')">
					<view class="name">修改昵称</view>
					<view class="edit">{{user.nickname}}<uni-icons class="icon" type="forward" size="14" color="#999"></uni-icons></view>
				</view>
				<view class="li" @click="get_edit('tel')">
					<view class="name">手机码</view>
					<view class="edit">{{user.tel || '绑定'}}<uni-icons class="icon" type="forward" size="14" color="#999"></uni-icons></view>
				</view>
				<view class="li" @click="get_copy()">
					<view class="name">邀请码</view>
					<view class="edit">{{user.lnvite_code}}<uni-icons class="icon" type="forward" size="14" color="#999"></uni-icons></view>
				</view>
			</view>
			<view class="quitbtn" @click="get_logout()">退出登录</view>
		</block>
		<!-- 弹窗 -->
		<view class="popup" v-if="edit.show">
			<view class="edit">
				<view class="title">
					<view class="h2">{{edit.type=='nickname'?'修改昵称':'修改手机号'}}</view>
					<view class="close" @click="edit.show=false"><uni-icons type="closeempty" size="20" color="#333"></uni-icons></view>
				</view>
				<view class="tlist" v-if="edit.type=='nickname'">
					<view class="frame">
						<input type="nickname" v-model="edit.nickname" maxlength="12" placeholder="请输入新昵称"/>
					</view>
				</view>
				<view class="tlist" v-else>
					<view class="frame">
						<input v-if="edit.tkey || user.tel==''" type="number" v-model="edit.tel" maxlength="11" placeholder="请输入新手机号"/>
						<input v-else :placeholder="user.tel" disabled="" />
					</view>
					<view class="frame">
						<input v-model="edit.code" type="number" maxlength="6" placeholder="请输入密码"/>
						<!-- <view class="send on" v-if="time<60">{{time}}s后重发</view>
						<view class="send" v-else @click="get_code()">发送验证码</view> -->
					</view>
				</view>
				<view class="btn" @click="get_edit_btn()">立即修改</view>
			</view>
		</view>
		<privacy v-if="privacyShow" :safearea="true"></privacy>
	</view>
</template>

<script>
	import privacy from '../../components/privacy.vue';
    let that = null;
    export default {
		components: {
			privacy
		},
        data() {
            return {
				privacyShow: false,
				user: {},
				time: 60,
				edit: {
					show: false,
					type: 'nickname',
					nickname: '',
					tel: '',
					code: '',
					tkey: ''
				}
            }
        },
        onLoad() {
            that = this;
			// #ifdef MP-WEIXIN
			wx.getPrivacySetting({
				success: res => {
					that.privacyShow = true;
				},
				fail: (e) => {},
				complete: () => {},
			})
			// #endif
			that.get_data();
        },
        methods: {
			get_link(url){
				uni.navigateTo({
					url: '../'+url
				});
			},
			get_data(){
				that.http.get_curl('user/index',{},function(res){
					if(res.code == 1){
						that.user = res.data;
					}
				});
			},
			get_logout() {
				uni.showModal({
					content: '确定要退出吗？',
					success: function (res) {
						if(res.confirm) {
							uni.removeStorageSync('user_token');
							uni.showToast({
								title: "已退出"
							});
							setTimeout(()=>{
								uni.switchTab({
									url: '../user/index'
								});
							},500);
						}
					}
				});
			},
			get_edit(type){
				that.edit.type = type;
				that.edit.show = true;
			},
			get_uppic(){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album','camera'],
					success: function (res) {
						that.http.get_upfiles('user/uppic',[{name:'file',uri:res.tempFilePaths[0]}],{},function(res){
							if(res.code == 1){
								uni.showToast({
									title: '上传成功'
								});
								that.user.pic = res.data.pic;
							}
						});
					}
				});
			},
			get_copy(){
				uni.setClipboardData({
					data: that.user.lnvite_code+'',
					success: function () {
						uni.showToast({
							title: '已复制'
						});
					}
				});
			},
			get_edit_btn(){
				that.http.get_curl('user/edit',that.edit,function(res){
					if(res.code == 1){
						if(res.data && res.data.tkey){
							uni.showToast({
								title: "验证成功，请填写新手机号",
								icon: 'none'
							});
							that.edit.tkey = res.data.tkey;
							that.edit.tel = '';
							that.edit.code = '';
							if(that.time < 60) that.time = 1;
						}else{
							uni.showToast({
								title: "修改成功"
							});
							if(that.edit.nickname) that.user.nickname = that.edit.nickname;
							if(that.edit.tel) that.user.tel = that.edit.tel;
							that.edit = {
								show: false,
								type: 'nickname',
								nickname: '',
								tel: '',
								code: '',
								tkey: ''
							};
						}
					}
				});
			},
			get_code(){
				if(that.time < 60) return;
				that.http.get_curl('login/telcode',{type:'edit',tel:that.edit.tel},function(res){
					if(res.code == 1){
						uni.showToast({
							title: "发送成功"
						});
						that.get_time();
					}
				});
			},
			get_time(){
				if(that.time > 1){
					that.time--;
					setTimeout(()=>{
						that.get_time();
					},1000)
				}else{
					that.time = 60;
				}
			}
        }
    }
</script>

<style lang="scss">
	image{width: 100%;height: 100%;}
	.list{padding: 0 32rpx;background: #fff;
		.li{width: 100%;display: flex;justify-content: space-between;align-items: center;height: 100rpx;border-bottom: 1rpx solid #f5f5f5;
			.name{font-size: 28rpx;color: #333;}
			.imgbox{display: flex;justify-content: flex-start;align-items: center;
				.img{height: 80rpx;width: 80rpx;overflow: hidden;border-radius: 50%;border: 2rpx solid #f5f5f5;}
				.icon{margin-left: 10rpx;}
			}
			
			.edit{font-size: 24rpx;color: #999;
				.icon{margin-left: 10rpx;}
			}
		}
	}
	.quitbtn{width: 70%;line-height: 80rpx;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);border-radius: 10rpx;font-size: 30rpx;margin: 0 auto;margin-top: 20rpx;color: #fff;}
	.popup{width: 100%;height: 100vh;background: rgba(0,0,0,.5);position: fixed;top:0;left: 0;z-index: 9;
		.edit{width: calc(100% - 64rpx);max-width: calc(1000rpx - 64rpx);padding: 0 20rpx;box-sizing: border-box;background: #fff;border: 1rpx solid #fff;border-radius: 20rpx;position: absolute;top: 30%;left: 50%;transform: translate(-50%,-50%);
			.title{width: 100%;height: 100rpx;position: relative;
				.h2{font-size: 30rpx;color: #333;line-height: 100rpx;text-align: center;}
				.close{position: absolute;top: 0;right: 32rpx;line-height: 100rpx;}
			}
			.tlist{padding: 0 32rpx;
				.frame{padding: 0 20rpx;height: 80rpx;background: #f5f5f5;margin-bottom: 42rpx;margin-top: 10rpx;;position: relative;
					input{height: 80rpx;font-size: 28rpx;width: 100%;}
					.send{position: absolute;top: 0;right: 20rpx;line-height: 80rpx;font-size: 26rpx;color: #f15d25;}
					.send.on{color: #999;}
				}
			}
			.btn{width: 70%;line-height: 70rpx;text-align: center;background: linear-gradient(270deg, #fcae3a, #f15d25);border-radius: 10rpx;font-size: 30rpx;margin: 0 auto;margin-bottom: 32rpx;color: #fff;}
		}
	}
</style>